<template>
  <div>
    <!-- 商家订单汇总页面 -->
    <van-collapse
      v-model="activeName"
      accordion
      v-for="(order, index) in orderList"
      :key="index"
    >
      <!-- 订单基本信息 -->
      <van-collapse-item
        :title="`订单号:${order.order_id}`"
        :name="index"
        @change="onOrderClick(order_items)"
      >
        <div class="van-hairline--surround">
          <van-cell-group>
            <van-cell
              :title="`订单状态：${getStatusText(order.status)}`"
            ></van-cell>
            <van-cell :title="`下单时间：${order.created_time}`"></van-cell>
            <van-cell :title="`付款时间：${order.payment_time}`"></van-cell>
          </van-cell-group>
          <div>
            <van-panel
              :title="order.address.receiver"
              :status="order.address.phone"
              :desc="order.address.address"
            ></van-panel>
            <!-- 订单商品选项卡 -->
            <van-cell-group v-for="(item, index) in order.items" :key="index">
              <van-card
                class="card"
                :title="item.name"
                :num="item.count"
                :thumb="'data:image;base64,' + item.images[0]"
                :price="item.current_price"
                @click="onItemClick(item)"
              />
            </van-cell-group>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import { axios, API_URL } from "../../api"
import { Collapse, CollapseItem, CellGroup, Cell, Card, Panel } from "vant"
export default {
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [CellGroup.name]: CellGroup,
    [Cell.name]: CellGroup,
    [Card.name]: Card,
    [Panel.name]: Panel
  },
  data() {
    return {
      orderList: [],
      activeName: "1",
      itemList: []
    }
  },
  methods: {
    onOrderClick(order_items) {
      order_items.forEach(item => {
        let orderItem = {}
        orderItem.count = item.count
        orderItem.review_id = item.review_id
        axios
          .get(API_URL + "item/" + item.item_id, {})
          .then(response => {
            orderItem.name = response.data.name
            orderItem.current_price = response.data.current_price
            orderItem.shop_id = response.data.shop_id
            this.orderItems.push(orderItem)
          })
          .catch(err => {
            console.error(err)
          })
      })
    },
    onItemClick(item) {
      this.$router.push({ name: "item", params: { item_id: item.item_id } })
    },
    /* 订单状态 */
    getStatusText(status) {
      switch (status) {
        case 0:
          return "待付款"
        case 1:
          return "已付款"
        case 2:
          return "配送中"
        case 3:
          return "已到达"
        case 4:
          return "已收货"
        case 5:
          return "异常"
      }
    }
  },
  mounted: function() {
    axios
      .get(API_URL + "shop/orders", {
        params: {
          group_index: 0
        },
        headers: {
          authorization: this.$store.state.shop_token
        }
      })
      .then(response => {
        let order_ids = response.data.orders
        order_ids.forEach(order_id => {
          /* 获得订单id */
          axios
            .get(API_URL + `shop/orders/${order_id}`, {
              headers: {
                authorization: this.$store.state.shop_token
              }
            })
            .then(response => {
              let order = {}
              order.customer_id = response.data.customer_id
              order.address = response.data.address || {
                receiver: "",
                phone: "",
                address: ""
              }
              order.status = response.data.status
              order.created_time = response.data.created_time
              order.payment_time = response.data.payment_time
              order.order_id = order_id
              order.items = []
              response.data.items.forEach(it => {
                axios
                  .get(API_URL + `items/${it.item_id}`, {
                    headers: {
                      authorization: this.$store.state.shop_token
                    }
                  })
                  .then(response => {
                    let item = {}
                    item.name = response.data.name
                    item.current_price = response.data.current_price
                    item.original_price = response.data.original_price
                    item.in_stock = response.data.in_stock
                    item.info = response.data.info
                    item.sales = response.data.sales
                    item.shop_id = response.data.shop_id
                    item.images = response.data.images
                    item.item_id = it.item_id
                    item.count = it.count
                    order.items.push(item)
                  })
                  .catch(err => {
                    console.error(err)
                  })
              })
              this.orderList.push(order)
            })
            .catch(err => {
              console.error(err)
            })
        })
      })
      .catch(err => {
        console.error(err)
        if (err.response.status == 401) {
          this.$router.push({ name: "shopLogin" })
        }
      })
  }
}
</script>
